<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            color: aqua;
            /* font-size: 30px; */
            /* 相对于自身字体(父元素的字体)，如果父元素没字体就是相对浏览器字体 */
            /* 浏览器默认字体大小是16px，所以2em是32px */
            font-size: 2em;
        }

        /* 那么效果是不是这样的 父元素2em是32px，然后子又继承过来2em，是不是为64px??? */
        /* 其实不是，继承过来的是计算好的值，所以依然是32px */
        /* 但是如果真的手动加上这个 font-size: 2em; 就真变成64px了 */
        p{
            /* font-size: 2em; */  
        }
    </style>
</head>
<body>
    <div class="box">
        box本身的内容
        <p>我是p元素</p>
    </div>
</body>
</html>